// 深色模式设计系统
@mixin dark-mode-variables {
  // 基础色板
  $base-hue: 230;
  $surface-1: hsl($base-hue 30% 12%);
  $surface-2: hsl($base-hue 25% 15%);
  $surface-3: hsl($base-hue 20% 18%);

  // 文字色阶
  --text-primary: hsl(0 0% 95%);
  --text-secondary: hsl(0 0% 75%);
  --text-tertiary: hsl(0 0% 55%);

  // 表面色阶（带透明度）
  --surface-1: #{$surface-1};
  --surface-2: #{$surface-2};
  --surface-3: #{$surface-3};
  --surface-4: #{transparentize($surface-1, 0.3)};

  // 组件样式覆盖
  --el-bg-color: var(--surface-2);
  --el-border-color: var(--surface-3);
  --el-fill-color-light: var(--surface-3);

  // 交互状态
  --hover-opacity: 0.08;
  --active-opacity: 0.12;
  
  // 投影系统
  --shadow-key: 0 4px 6px -1px rgba(0 0 0 / 0.4);
  --shadow-elevation: 0 10px 15px -3px rgba(0 0 0 / 0.3);
}

// 组件级深色模式适配
[data-theme="dark"] {
  body {
    --background-color: var(--surface-1);
    background: var(--background-color);
    color: var(--text-primary);
  }

  // 全局容器
  #app {
    background: inherit;
    min-height: 100vh;
  }

  // 表单元素
  .el-input {
    background: var(--surface-2);
    transition: all 0.3s var(--easing-smooth);

    &:hover {
      background: var(--surface-3);
    }
  }

  // 对话框
  .el-dialog {
    background: var(--surface-2);
    border-color: var(--surface-3);
  }

  // 下拉菜单
  .el-dropdown-menu {
    background: var(--surface-3);
    border: 1px solid var(--surface-2);
  }

  // 分页组件
  .el-pagination {
    --el-pagination-bg-color: var(--surface-2);
    --el-pagination-button-disabled-bg-color: var(--surface-1);
  }

  // 卡片
  .el-card {
    background: var(--surface-2);
    border-color: var(--surface-3);
    box-shadow: var(--shadow-key);
  }

  // 按钮
  .el-button {
    transition: 
      background-color 0.2s var(--easing-smooth),
      transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:not(.is-disabled) {
      background: var(--surface-3);
      border-color: var(--surface-2);
    }

    &:active {
      transform: scale(0.98);
    }
  }

  // 表格
  .el-table {
    --el-table-header-bg-color: var(--surface-2);
    --el-table-tr-bg-color: var(--surface-1);
  }

  // 加载层
  .el-loading-mask {
    background-color: var(--surface-4);
  }

  // 消息提示
  .el-message {
    background: var(--surface-3) !important;
    border-color: var(--surface-2) !important;
  }
}